{% extends "base.html" %}

{% block title %}切片实验室 - 文档切块{% endblock %}

{% block extra_css %}
<style>
    .chunk-params {
        background-color: var(--card-bg);
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        padding: 2rem;
        margin-bottom: 2rem;
    }
    
    .chunk-list {
        background-color: var(--card-bg);
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        padding: 2rem;
    }
    
    .chunk-item {
        border-bottom: 1px solid rgba(0,0,0,0.05);
        padding: 1rem 0;
    }
    
    .chunk-item:last-child {
        border-bottom: none;
    }
    
    .chunk-sequence {
        font-weight: bold;
        min-width: 3rem;
    }
    
    .chunk-content {
        white-space: pre-wrap;
        font-family: monospace;
        background-color: var(--light-bg);
        padding: 1rem;
        border-radius: 4px;
        margin-top: 0.5rem;
        border-left: 3px solid var(--accent-light);
    }
    
    .chunk-metadata {
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-bottom: 0.5rem;
    }
    
    .progress-container {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    .processing-status {
        margin-top: 10px;
        font-size: 14px;
        color: var(--text-muted);
    }
    
    .document-info {
        margin-bottom: 1.5rem;
    }
    
    .param-item {
        display: inline-block;
        margin-right: 1.5rem;
    }
    
    .param-label {
        font-weight: 600;
        margin-right: 0.5rem;
        color: var(--primary-color);
    }
    
    h2, h4, h6 {
        color: var(--primary-color);
    }
    
    .alert-info {
        background-color: rgba(43, 88, 118, 0.15);
        border-color: rgba(43, 88, 118, 0.4);
        color: var(--info-color);
    }
    
    .dropdown-item:active {
        background-color: var(--primary-color);
    }
    
    .status-unpushed {
        background-color: rgba(230, 126, 34, 0.1);
        color: #e67e22;
    }
    
    .status-pushing {
        background-color: rgba(142, 68, 173, 0.1);
        color: #8e44ad;
    }
    
    .status-pushed {
        background-color: rgba(39, 174, 96, 0.1);
        color: #27ae60;
    }
</style>
{% endblock %}

{% block content %}
<!-- 隐藏字段用于JS获取文档信息 -->
<input type="hidden" id="documentId" value="{{ document.id }}">
<input type="hidden" id="documentStatus" value="{{ document.status }}">
<input type="hidden" id="documentFilename" value="{{ document.filename }}">

<div class="row mb-4">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>文档切块</h2>
            <div class="d-flex align-items-center">
                <div class="dropdown me-3">
                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="strategyInfoDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-info-circle me-1"></i>可用算法列表
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="strategyInfoDropdown" style="min-width: 300px; max-width: 400px; max-height: 70vh; overflow-y: auto;">
                        {% for strategy in chunk_strategies %}
                        <li>
                            <div class="dropdown-item py-1 px-3">
                                <div><strong>{{ strategy.display_name }}</strong></div>
                                <div class="text-muted small" style="white-space: normal; line-height: 1.3;">{{ strategy.description|default('暂无描述') }}</div>
                                {% if strategy.supported_types %}
                                <div class="text-info small">
                                    支持: {{ strategy.supported_types|join(', ') }}
                                </div>
                                {% endif %}
                            </div>
                        </li>
                        {% if not loop.last %}<li><hr class="dropdown-divider my-1"></li>{% endif %}
                        {% endfor %}
                    </ul>
                </div>
                <a href="/chunklab" class="btn btn-outline-primary">
                    <i class="fas fa-arrow-left me-2"></i>返回切片实验室
                </a>
            </div>
        </div>
        
        <!-- 文档信息 -->
        <div class="alert alert-info">
            <h5 class="mb-2">{{ document.filename }}</h5>
            <div>
                <small class="text-muted">上传时间：{{ document.upload_time.strftime('%Y-%m-%d %H:%M:%S') }}</small>
                {% if document.status == '已切块' %}
                <span class="mx-2">|</span>
                <span class="document-status doc-push-status 
                      {% if document.push_status == '已推送' %}status-pushed
                      {% elif document.push_status == '推送中' %}status-pushing
                      {% else %}status-unpushed{% endif %}" 
                      data-document-id="{{ document.id }}">
                    {{ document.push_status }}
                </span>
                {% endif %}
            </div>
        </div>
        
        <!-- 切块参数设置 -->
        <div class="chunk-params">
            <h4 class="mb-4">切块参数设置</h4>
            <form id="chunkForm" class="row g-3">
                <div class="col-md-4">
                    <label for="chunkStrategy" class="form-label">切块策略</label>
                    <select class="form-select" id="chunkStrategy" name="chunk_strategy" required>
                        {% for strategy in chunk_strategies %}
                        <option value="{{ strategy.name }}">{{ strategy.display_name }}</option>
                        {% endfor %}
                    </select>
                    <div class="invalid-feedback">请选择切块策略</div>
                </div>
                <div class="col-md-4">
                    <label for="chunkSize" class="form-label">切块大小</label>
                    <input type="number" class="form-control" id="chunkSize" name="chunk_size" 
                           value="{{ default_chunk_size }}" min="1" required>
                    <div class="invalid-feedback">切块大小必须大于0</div>
                </div>
                <div class="col-md-4">
                    <label for="overlap" class="form-label">重叠度</label>
                    <input type="number" class="form-control" id="overlap" name="overlap" 
                           value="{{ default_overlap }}" min="0" required>
                    <div class="invalid-feedback">重叠度必须大于等于0且小于切块大小</div>
                </div>
                <div class="col-12 mt-3">
                    <button type="submit" class="btn btn-primary" id="submitButton">
                        <i class="fas fa-cut me-2"></i>开始切块
                    </button>
                </div>
            </form>
            
            <!-- 进度条 -->
            <div class="progress-container" id="progressContainer" style="display: none;">
                <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" 
                         id="chunkProgress" role="progressbar" 
                         aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" 
                         style="width: 0%">0%</div>
                </div>
                <div class="processing-status text-muted" id="processingStatus">初始化处理...</div>
            </div>
        </div>
        
        <!-- 切块列表 -->
        <div class="chunk-list mt-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4 class="mb-0">
                    <i class="fas fa-list me-2"></i>切块列表
                </h4>
                {% if chunks and chunks|length > 0 %}
                <div>
                    <button type="button" class="btn btn-sm btn-secondary me-2" 
                            style="background-color: #4a5568; border-color: #4a5568;"
                            data-bs-toggle="modal" data-bs-target="#addToDifyModal"
                            data-document-id="{{ document.id }}">
                        <i class="fas fa-plus-circle me-1"></i>AddDify
                    </button>
                    <button type="button" class="btn btn-sm btn-info" 
                            data-bs-toggle="modal" data-bs-target="#singleToDifyModal"
                            data-document-id="{{ document.id }}">
                        <i class="fas fa-cloud-upload-alt me-1"></i>ToDify
                    </button>
                </div>
                {% endif %}
            </div>
            
            {% if document.status == '已切块' and document.last_chunk_params %}
            <div class="mb-3 text-muted small">
                <i class="fas fa-info-circle me-2"></i>
                {% if chunks %}
                <span>共{{ chunks|length }}个切块</span>
                <span class="mx-2">|</span>
                {% endif %}
                <span>策略:</span>
                {% for strategy in chunk_strategies %}
                    {% if strategy.name == document.last_chunk_params.strategy %}
                        {{ strategy.display_name }}
                    {% endif %}
                {% endfor %}
                <span class="mx-2">|</span>
                <span>切块大小: {{ document.last_chunk_params.size }}</span>
                <span class="mx-2">|</span>
                <span>重叠度: {{ document.last_chunk_params.overlap }}</span>
            </div>
            {% endif %}
            
            <div id="chunkResults">
                {% if chunks and chunks|length > 0 %}
                    <div class="chunks-container">
                        {% for chunk in chunks %}
                        <div class="chunk-item">
                            <div class="d-flex">
                                <span class="chunk-sequence">#{{ chunk.sequence }}</span>
                                <div class="flex-grow-1">
                                    {% if chunk.chunk_metadata and chunk.chunk_metadata.heading %}
                                    <div class="chunk-heading">
                                        <i class="fas fa-heading me-1"></i>
                                        <span>所属标题: {{ chunk.chunk_metadata.heading }}</span>
                                    </div>
                                    {% endif %}

                                    <div class="row">
                                        <div class="{% if chunk.chunk_metadata and chunk.chunk_metadata is mapping and chunk.chunk_metadata.keys()|list|length > 0 %}col-md-7 col-lg-6{% else %}col-12{% endif %}">
                                            <div class="chunk-content">{{ chunk.content }}</div>
                                        </div>
                                        
                                        {% if chunk.chunk_metadata and chunk.chunk_metadata is mapping and chunk.chunk_metadata.keys()|list|length > 0 %}
                                        <div class="col-md-5 col-lg-6">
                                            <div class="card h-100 bg-light">
                                                <div class="card-header py-2 bg-light">
                                                    <h6 class="mb-0 fs-6"><i class="fas fa-info-circle me-1"></i>元数据信息</h6>
                                                </div>
                                                <div class="card-body py-2">
                                                    <div class="meta-content" style="font-family: monospace; font-size: 0.85rem; max-height: 300px; overflow-y: auto;">
                                                        <table class="table table-sm table-borderless mb-0">
                                                            <tbody>
                                                                {% for key, value in chunk.chunk_metadata.items() %}
                                                                {% if key != 'heading' %}  <!-- 已经在上面显示了heading -->
                                                                <tr>
                                                                    <td style="width: 35%; color: var(--primary-color); vertical-align: top;">{{ key }}</td>
                                                                    <td style="word-break: break-word; max-width: 300px;">
                                                                        {% if value is mapping or value is sequence and value is not string %}
                                                                            <pre class="mb-0" style="font-size: 0.85rem; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;">{{ value|tojson(indent=2) }}</pre>
                                                                        {% else %}
                                                                            <span style="word-break: break-word;">{{ value }}</span>
                                                                        {% endif %}
                                                                    </td>
                                                                </tr>
                                                                {% endif %}
                                                                {% endfor %}
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {% endif %}
                                    </div>

                                    <div class="chunk-metadata mt-1">
                                        <span>字符数: {{ chunk.content|length }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                {% elif document.status == '处理中' %}
                    <div class="alert alert-info" role="alert">
                        <i class="fas fa-spinner fa-spin me-2"></i>
                        正在处理切块，请稍候...
                    </div>
                {% else %}
                    <div class="alert alert-warning" role="alert">
                        尚未进行切块，请设置参数并开始切块。
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

<!-- 引入ToDify弹窗 -->
{% include "chunklab/to_dify_box.html" %}

<!-- 引入AddDify弹窗 -->
{% include "chunklab/add_dify_box.html" %}

{% block extra_js %}
<!-- 引入切块脚本 -->
<script src="/static/js/chunklab_chunk.js"></script>
{% endblock %} 